logo

Beoreo | Multi-Purpose HTML Template

Introduction:

Carefully crafted design of Beoreo premium Multi Purpose HTML Template which is made to fit any niche of small and large businesses and others like company, law, shop, portfolio, agency, transport and any other niche. The beautiful and feature-rich sections can be displayed and rearranged on your website with an awesome code structure . All the homepages have been developed with special attention in Beoreo – a premium HTML template. it will take only minutes to launch a website as it is coded very professionaly and optimized in every way.

Built with neat, clean, unique and stylish outlook, Bereo premium HTML template is going to offer the clients the best alternative for conventional web building tools. Being a piece of artistic perfection, it will open a new horizon of possibilities for the professional designers in the area of web development. What is most inspiring about the product is its decent design and catchy view. It is fully manageable and very easy-to-use, as you can use any widget or feature anywhere on the theme quickly and without hassle. In this way, you can modify the site according to your own special taste and requirements. Your majestic multipurpose Bereo template is powered with 18 innovative Homepage layouts and as many as 58 built-in pages for versatile usage

Prominent Features:

  • Light, 100% responsive and fully flexible premium HTML template
  • Neat, clean and simple design
  • Cross browser compatible
  • 18 Built-in fully featured HTML homepages
  • Advanced version of Revolution Slider (Save $15)
  • Built-in latest SEO features
  • Owl Carousel2 included
  • High Resolution picture graphics
  • Unlimited color schemes
  • Super Responsive
  • 11 Built in slides for Revolution Slider
  • Well managed CSS file with proper table of content
  • Properly Commented and indented HTML files.
  • Boxed and Wide Layout
  • Fixed and Sticky Headers
  • Optimized
  • Built with bootstrap 3.3.4
  • Google Fonts & Font Awesome
  • 1170 pixel width
  • HTML5 Validated
  • Developed with jQuery Code
  • Detailed and complete documentation

Javasripts:

enscroll-0.5.2.min:The customized scroll bar in different section has been designed with the help of this particular plugin.

jquery2.1.4:This particular jQuery file renders functionality to all the other jQuery files featured in the Lord HTML template.

owl.carousel.min:The working of all the carousels is based on this file. Owl Carousel is one of the best responsive carousels that works with the touch swipe on the small devices like ipad, mobiles etc.

modernizr.custom.17475Taking advantage of cool new web technologies is a great fun. Modernizr makes it easy for you to write conditional JavaScript and CSS codes to handle each situation, for example, whether a particular browser supports a feature or not. It’s perfect for accomplishing progressive tasks easily.

jquery.poptrox.min:The functinality of the lightbox has been put using this jquery plugin Poptrox.It supports all the lightbox for images videos like vimeo, youtube, iframes, soundcloud etc.

isotope.js & isotope-initialize.jsThe template majorly depends on masonary projects and portfolio sections, Which are made by using isotpe Jquery plugin.

slick.minThe Blog Tabs like carousel on homepage1 are based on this partciular jQuery Carousel Plugin.So the Bereo template has the most powerfull carousels.

jquery.scrollyThe Fancy parallax sections in the template are working with the help of this jQuery Plugin.

script.js:It contains all the jQuery functions that have been incorporated in the template.

Css Files:

style.cssThis is the main style file on which the overall styling of the template is based.

responsive.cssThis CSS file gets automatically activated when you are using the template on smaller screen sizes.

slick.cssAs the name suggests the plugin is to be used for slick carousel and inclued only on those page where the slick carousel is in action.

bootstrap.min.cssAs the theme has been developed on ‘bootstrap’, all the styles of this framework are based on this CSS file.

revolution.cssAs the name suggests, this file belongs to the Revolution Slider.

CODE STRUCTURE:

How to

How to swtich between sticky and fixed header?

The template supports both sticky and fixed headers. The sticky header is enabled just by adding a class stick with the <>header<> tag in this way:

<header class="stick">

By default, sticky header has been enabled on all the pages. In order to make the header non sticky you just need to remove the stick class from the <>header<> tag and that's it. The header will become non sticky.

How to manage gaps between the sections?

For the top and bottom spacing for each section, the class "block"has been used, which applies 90 pixels spacing to the section from the top and bottom.

You can manage the inter-section spacing easily according to your page flow.When you use sections one after another then the spacing between the two sections becomes 180 pixels as the bottom space of the top section and the top space of the bottom section will join, and it will become awkward spacing.To manage this spacing between the consecutive sections use class "remove-gap" with the "block" class in the section from which you want to avoid top space.

<div class="block remove-gap">

How to change the Email address in the contact form?

The premium working Contact Form has been used in the Contact Section of the template, To make that Contact Form send the emails to your email address, you need to put your email address in the contact.php file,which you will find in the package. Open contact.php in the editor and find this code:

$address = "example@themeforest.net";

Replace this email id with your own email address, and save the file. Now the Contact Form will send emails to your given email address.

How to make your own color scheme?

If you want to use your own color scheme in the template, it is very easy to define and apply it. Go to the "css" folder. You will find "colors" folder inside it. In this folder, you can locate "color.css" file. Open any it in the editor, you will see a long list of classes separated with commas (,). Here you need to change the css properties for the background, color and border. For this purpose, just change the color code in that file and thats all.

How to switch between boxed and wide layout?

The Template supports both boxed and wide layouts. By default the template is full width. You can convert any page to boxed layout just by adding a class boxed to a div having class "theme-layout" in this way:

<div class = "theme-layout boxed">

When you make your page boxed now you also need a background image to make it look beautilfull. In order to add a backgroud to the page, change your <body> to this <body style="background-image: url(images/parallax3.jpg);">. Put the path of your image in the URL brackets. Now Your webpage is converted into boxed layout.

An example page is also given in the package to make it more easier for you named index-boxed.html

Credits

The credit for the development of this marvelous template goes to:

  • Google Fonts
  • Bootstrap
  • Flat Icons
  • Owl Carousel
  • Developers of Javascript files which have been utilized herein.
  • Team of Stillidea